<template>
    <div style="height: 875px;">
      <Header :position="position"></Header>
      <div style="display: flex;">
        <el-card style="width: 100%">
          <div slot="header"
               style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>零件基本信息</span>
          </div>
          <div style="display: flex;margin-bottom: 20px">
            <div style="">类型：
              <el-select v-model="typeSelect"  placeholder="请选择" size="mini">
                <el-option v-for="item in typeSelectData" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-left: 10px">
              型号：
              <el-select v-model="modelSelect"  placeholder="请选择" size="mini">
                <el-option v-for="item in modelSelectData" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-left: 10px">编号：
              <el-select v-model="serialSelect" placeholder="请选择" size="mini">
                <el-option v-for="item in serialSelectData" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-left: 10px">
              位置：
              <el-select v-model="positionSelect" placeholder="请选择" size="mini">
                <el-option v-for="item in positionSelectData" :key="item"
                           :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="margin-left: 10px">
              <el-button class="el-icon-search" size="mini" type="primary" @click="searchData">搜索</el-button>
            </div>
          </div>
          <div style="display: flex;">
          <el-card :body-style="{ padding: '15px' }"
                  style="font-size: 18px;width: 33%;padding:0px;height: 280px;
                  border-right: 1px solid #DCDFE6;font-weight: bolder;text-align: left">
            <div slot="header"
                 style="font-size: 18px;font-weight: bolder;text-align: left">
              <span>设备信息卡</span>
            </div>
            <div style="display: flex;height: 100%;margin-top: 30px">
              <div style="width: 50%;">
                <div>
                  <div style="width: 50%;text-align: right;display: inline-block">类型：</div>
                  <span>{{basicInfo.type}}</span>
                </div>
                <div class="lineHeight"></div>
                <div>
                  <span style="width: 50%;text-align: right;display: inline-block">编号：</span>
                  <span>{{basicInfo.serial}}</span>
                </div>
                <div class="lineHeight"></div>
                <!--            <el-divider></el-divider>-->
                <div>
                  <span style="width: 50%;text-align: right;display: inline-block">状态：</span>
                  <span>{{basicInfo.status}}</span>
                </div>
                <div class="lineHeight"></div>
              </div>
              <div style="width: 50%">
                <div>
                  <span style="width: 50%;text-align: right;display: inline-block">出厂日期：</span>
                  <span>{{basicInfo.manufactureDate}}</span>
                </div>
                <div class="lineHeight"></div>
                <!--            <el-divider></el-divider>-->
                <div>
                  <span style="width: 50%;text-align: right;display: inline-block">所属用户：</span>
                  <span>{{basicInfo.user}}</span></div>
              </div>
            </div>
          </el-card>
            <div style="width: 66%;">
              <div
                   style="margin-right: 20px;font-size: 20px;font-weight: bolder;text-align: center">
                <span>数据详情</span>
              </div>
<!--              <h3 style="margin-left: 10px;margin-top: 10px">数据详情</h3>-->
            <div style="width: 100%;white-space: nowrap;overflow-x: auto">
              <div id="dash_bord3" style="width: 250px;height: 250px;display: inline-block;margin-right: 100px;margin-left: 80px">
              </div>
              <div id="dash_bord1" style="width: 250px;height: 250px;display: inline-block;margin-right: 100px">
              </div>
              <div id="dash_bord2" style="width: 250px;height: 250px;display: inline-block"></div>
            </div>
            </div>
          </div>

      </el-card>
      </div>
      <div style="display: flex;white-space: nowrap;margin-top: 10px">
        <el-card style="width: 50%">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>设备图</span>
          </div>
          <el-carousel trigger="click" height="325px" :autoplay="false">
            <el-carousel-item v-for="item in 4" :key="item">
              <el-image style="height: 330px" :src='require("../../assets/img/motor.jpg")' :fit="'scale-down'"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-card>
        <el-card style="width: 50%;margin-left: 10px;">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>信息列表</span>
          </div>
          <el-table
            :data="dataList"
            stripe
            height="280"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="value"
              label="数值">
            </el-table-column>
            <el-table-column
              prop="threshold"
              label="阈值">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位">
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="20"
            style="margin-top: 10px"
            :total="400">
          </el-pagination>
        </el-card >
      </div>
    </div>
</template>

<script>
  import Header from "../Header";
  import * as echarts from 'echarts'
    export default {
        name: "equipStatusCard",
        components:{ Header},
        props:{
          equipTitle:{
            default:'',
            type:String,
          }
        },
      data(){
          return{
            typeSelect:'',//类型选择绑定和选择的数据
            typeSelectData:[{'name':'跑车',value:1},{'name':'货车',value:2},{'name':'装甲车',value:3}],
            modelSelect:'',//型号选择绑定和选择的数据
            modelSelectData:[{'name':'99A',value:1},{'name':'200A',value:2},{'name':'109A',value:3}],
            serialSelect:'',//编号选择绑定和选择的数据
            serialSelectData:[{'name':'114514',value:1},{'name':'115514',value:2},{'name':'110004',value:3}],
            positionSelect:'',//位置选择绑定和选择的数据
            positionSelectData:[{'name':'北京',value:1},{'name':'上海',value:2},{'name':'天津',value:3}],
            searchData:'',
            basicInfo:{
              type:'IAA-T75',
              user:'长江公司',
              serial:'140004',
              status:'在线',
              manufactureDate:'2021/4/2'
            },
            dataList:[
              {'name':'零·峰值','value':4.85,'threshold':17.91,'unit':'m/s^2'},
              {'name':'RMS','value':1.21,'threshold':4.39,'unit':'m/s^2'},
              {'name':'波高半数','value':4.03,'threshold':8.15,'unit':'m/s^2'},
              {'name':'RMS','value':1.21,'threshold':4.39,'unit':'m/s^2'},
              {'name':'波高半数','value':4.03,'threshold':8.15,'unit':'m/s^2'},
            ],
            pressValue:50,
            spillValue:40,
            spillValue1:30,
            position:{
              secondTitle:'状态信息' ,
              thirdTitle:'车辆/零件状态信息',
              routeString:'/StatusMonitor/NationWideStatus'
            },

        }
      },
      mounted() {
        this.drawDashBord1()
        this.drawDashBord2()
        this.drawDashBord3()
      },
      methods:{
        // querySearch(queryString, cb){
        //
        // },
        // handleSelect(item) {
        // },
        drawDashBord1(){
          let myChart = echarts.init(document.getElementById('dash_bord1'));
          let option = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
              name: '压力',
              type: 'gauge',
              itemStyle: {
                color: '#91cc75',
              },
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              data: [{
                value: this.pressValue,
                name: '压力',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }],
              grid:{
                x:0,
                y:0,
              }
            }]
          };
          myChart.setOption(option);
        },
        drawDashBord2(){
          let myChart1 = echarts.init(document.getElementById('dash_bord2'));
          let option = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
              name: '泄露',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              itemStyle: {
                color: '#fac858',
              },
              data: [{
                value: this.spillValue,
                name: '泄露',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }]
            }]
          };
          myChart1.setOption(option);
        },
        drawDashBord3(){
          let myChart1 = echarts.init(document.getElementById('dash_bord3'));
          let option = {
            tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
              name: '液压',
              type: 'gauge',
              progress: {
                show: true
              },
              detail: {
                valueAnimation: true,
                formatter: '{value}'
              },
              itemStyle: {
                color: '#5470c6',
              },
              data: [{
                value: this.spillValue1,
                name: '液压',
                title: {
                  offsetCenter: ['0%', '80%']
                },
              }]
            }]
          };
          myChart1.setOption(option);
        },
      }
    }
</script>

<style scoped>
.tableTitle{
  display: table-cell;
  text-align: center;
  font-size: 15px;
  padding: 5px;
  color: gray;
}
.tableCell{
  display: table-cell;
  text-align: center;
  vertical-align:middle;
  font-size: 15px;
  padding: 5px;
}
  .oddLine{
    background: #8adafa;
  }
  .evenLine{
    background: #fff;
  }

.loadbar
{
  width:25px;
  height:150px;
  background-color:#fff;
  border:1px solid #ccc;
  position:relative;
}
.bar
{
  width:100%;
  display:block;
  font-family:arial;
  font-size:12px;
  background-color: #597ebb;
  color:#fff;
  position:absolute;
  bottom:0;
}
  .lineHeight{
    height: 25px;
  }
</style>
<style>
  .el-divider--horizontal{
    margin: 15px 0
  }
  .el-divider{
    border: 0px;
  }
</style>
